<template>
  <view class="container">
    <div class="page-top">
    </div>
    <div class="gybody">
      <div class="denglu1">
        <ul class="denglu_bd hzly">
          <li class="input">
            <van-field placeholder="请输入手机号" @change="doPhoneChange" :value="userInfo.phone"
                       maxlength="11" type="digit" label="手机号"></van-field>
          </li>

          <li class="input">
            <van-cell-group :border="false">
              <van-field placeholder="请输入验证码" :value="userInfo.code" maxlength="20" label="验证码"
                         :border="false" @change="doCodeInput">
                <van-button slot="button" size="small" type="primary" :disabled="verifyBtnStatus"
                            @click="doSendVerifyClick">{{ verifyTxt }}
                </van-button>
              </van-field>
            </van-cell-group>
          </li>

          <li class="msg flexce">
            <text class="msg_input" @click="toRegister">快速注册</text>
          </li>
          <li class="anniu  denglu-anniu">
            <view class="button" @click="to_index">登录</view>
          </li>
        </ul>

      </div>


    </div>
    <van-toast id="van-toast"/>
  </view>
</template>
<script>
import {doLogin, doSendVerify} from "../../../requests/merchant";
import Toast from '../../../../static/vant/toast/toast';
import {clearObjectValues} from "../../../requests/tools";

export default {
  name: "index",
  data() {
    return {
      userInfo: {
        phone: "",
        username: "",
        password: "",
        confirm_password: "",
        code: "",
        type: "1"
      },
      verifyTxt: "发送验证码",
      verifyBtnStatus: false
    }
  },
  methods: {
    doSendVerifyClick() {
      let $data = {"phone": this.userInfo.phone, "type": 1};
      doSendVerify($data).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          let time = 60
          let intervalId = setInterval(() => {
            if (time > 0) {
              time--;
              this.verifyBtnStatus = true;// 防止再次触发点击事件
              this.verifyTxt = `${time}S后重新发送`;
            } else {
              this.verifyTxt = '重新发送验证码';
              this.verifyBtnStatus = false;
              if (intervalId) {
                clearInterval(intervalId);
              }
            }
          }, 1000)
          Toast.success('发送成功')
        }else {
          Toast.fail(resp.msg)
        }
      })
    },
    to_index() {
      let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d|19\d|16\d)\d{8}/;
      let $verify_reg = /\d{6}/;

      if (!$reg.test(this.userInfo.phone) || this.userInfo.phone === '') {
        Toast.fail('请输入正确手机号');
        return false;
      }
      if (!$verify_reg.test(this.userInfo.code) || this.userInfo.code === '') {
        Toast.fail('请输入正确验证码');
        return false;
      }

      // 利用code 作为参数传到服务端接口
      // 接口返回openid后再执行登录

      doLogin(this.userInfo).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          mpvue.setStorageSync('token', resp.data.token)
          mpvue.redirectTo({
            url: "/pages/merchant/index/main",
          });
          clearObjectValues(this.userInfo)
        } else {

          Toast.fail(resp.msg)

        }
      })

    },
    to_car() {
      mpvue.navigateTo({
        url: "/pages/user/pay/main",
      });
    },
    to_user() {
      mpvue.navigateTo({
        url: "/pages/user/index/main",
      });
    },
    toVerifyLogin() {
      mpvue.navigateTo({
        url: "/pages/merchant/verify_login/main",
      });
    },
    toFindPassword() {
      mpvue.navigateTo({
        url: "/pages/merchant/find_password/main",
      });
    },
    toRegister() {
      mpvue.navigateTo({
        url: "/pages/merchant/register/main",
      });
    },
    /**
     * 处理手机号
     * @param e
     */
    doPhoneChange(e) {
      this.userInfo.phone = e.mp.detail;
    },
    /**
     * 处理用户名
     * @param e
     */
    doUsernameChange(e) {
      this.userInfo.username = e.mp.detail;
    },
    /**
     * 处理密码输入
     * @param e
     */
    doUserpasswordChagne(e) {
      this.userInfo.password = e.mp.detail
    },
    /**
     * 处理验证码输入
     * @param e
     */
    doCodeInput(e) {
      this.userInfo.code = e.mp.detail;
    },
  },
  onShow() {
    let token = mpvue.getStorageSync('token');
    if (token) {
      mpvue.redirectTo({
        url: "/pages/merchant/index/main",
      });
    }
  }
}
</script>
<style>
@import "index.css";
</style>
